<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    	input[type='text']::-webkit-input-placeholder{
    		color: red;
    	}
    </style>
</head>
<body>
    <div contenteditable="true"></div>
    <!--内容可编辑-->
    <meter value="50" min="20" low="30" high="70" max="100"></meter><br />
    <!--表示状态值-->
    <progress></progress><br />
  		<!--datalist不占位列表标签-->
  		<input type="text" placeholder="模糊提示" list="mingzi" />
    	<datalist id="mingzi">
    		<option value="列表"></option>
    		<option value="列表"></option>
    		<option value="列表"></option>
    	</datalist>
    	<!--占位列表标签detalis-->
    <details>
    	<summary>首个显示</summary>
    	<p>列表</p>
    	<p>列表</p>
    	<p>列表</p>
    	<p>列表</p>
    </details>
    <!--ruby备注拼音配合rt使用-->
    <p>我的&nbsp;<ruby>天<rt>tian</rt>呐&nbsp;<rt>na</rt></ruby></p>
    <!--mark标记标签-->
    <p>不是吧<mark>我勒个去</mark>忒可怕了</p>
    <!--<form action="http://baidu.com" method="post" autocomplete="on">-->
    	<!--autofocus自动获取焦点-->
    	<!--<input type="text" placeholder="你知道孤独么" autofocus="autofocus"/><br />
    	<input type="text" /><br />
    	<input type="checkbox" /><br />
    	<input type="submit" value="提交" />
    </form>-->
    <form action="http://baidu.com" method="GET">
		<label for="email">email:</label>
		<input type="email"  id="email"/><br />
		<label for="number">number:</label>
		<input type="number" value="1" min="1" max="10" step="1.5" id="number"/><br />
		<lable for="range">range:</lable> 
		<input type="range" min="1" max="10" step="3" id="range" /><br />
		<label for="date">date:</label>
		<input type="date" name="" id="date" value="" /><br />
		<label for="week">week:</label>
		<input type="week" name="" id="week" value="" /><br />
		<label for="time">time:</label>
		<input type="time" name="" id="time" value="" /><br />
		<label for="datetime-local">datetime-local:</label>
		<input type="datetime-local" name="" id="datetime-local" value="" /><br />
		<label for="color">color:</label>
		<input type="color" name="" id="color"/>
    </form>
    <div class="box1 box2 box3"></div>
    <div id="div" class="box1" data-aaa="aa"></div>
    
    <script type="text/javascript">
    	var meter=document.querySelector('meter');
    	console.log(meter.getAttribute('low'))
    	
    	
    	
    	var box=document.querySelector('.box1');
    	console.log(box.classList);
    	var arr=new Array();
    	console.log(arr);
    	console.log(Array.isArray(arr))
    	
    	box.classList.add('box4');
//  	classList的增加
    	console.log(box.classList)
    	box.classList.remove('box2');
    	//  	classList的删除
    	console.log(box.classList)
    	box.classList.toggle('box3');
    	//  	classList的切换
    	console.log(box.classList)
    	
//  	读取对象的属性
		var person=new Object();
		person.name='xiaoli';
		person.age=20;
		console.log(person);
		console.log(person.age);
		console.log(person['age']);
		
		
//		读取标签属性
		box.setAttribute('class','box1 box2');
		console.log(box.getAttribute('class'));
		console.log(box.dataset.aaa);
		box.dataset.aaa='bbb';
		console.log(box.dataset.aaa);
		box.dataset.aaa='bbb';
		console.log(box.dataset.bbb);
    </script>
</body>
</html>

























